<template>
  <div class="dashboard-container">
    <!-- 搜索表单 -->
    <!-- 搜索表单 -->
    <div class="app-container">
      <el-card>
        <el-row type="flex" justify="between">
          <el-col :span="22">
            <el-form ref="form" :model="form" label-width="80px" :inline="true">
              <el-form-item>
                <el-input v-model="form.subject_name" placeholder="学科名称" />
              </el-form-item>
              <el-form-item>
                <el-select v-model="form.is_show" placeholder="显示状态">
                  <el-option label="显示" value="1" />
                  <el-option label="隐藏" value="2" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <template>
                  <el-button
                    type="primary"
                    size="small"
                    @click="search(form)"
                  >搜索</el-button>
                </template>
                <el-button size="small" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="1">
            <el-button
              id="create"
              type="primary"
              size="medium "
              @click="add()"
            >创建学科</el-button>
          </el-col>
        </el-row>

        <!-- 搜索表单 -->
        <!-- 搜索表单 -->

        <!-- 表格 -->
        <!-- 表格 -->
        <div class="bottom">
          <el-table stripe border :data="list">
            <el-table-column label="序号" type="index" align="center" />
            <el-table-column prop="id" label="学科ID" align="center" />
            <el-table-column
              prop="subject_name"
              label="学科名称"
              align="center"
              width="250"
            />
            <!-- src="http://122.51.249.55:7005/admin/index/upload/image/2021/04/1618146157124.jpg" -->
            <el-table-column prop="" label="学科图标" align="center">
              <template slot-scope="{row}">

                <img
                  v-imageerror="defaultimg"
                  class="size"
                  :src="`http://122.51.249.55:7005/${row.subject_icon}`"
                  alt=""
                >
              </template>
            </el-table-column>

            <el-table-column label="创建人" prop="username" align="center" />
            <el-table-column prop="date" label="是否显示" align="center">
              <template slot-scope="{ row }">
                <el-switch
                  v-model="row.is_show"
                  :active-value="1"
                  :inactive-value="2"
                  active-text="是"
                  inactive-text="否"
                  @change="switchfn(row.id,row.is_show)"
                />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="cate_num"
              s
              label="目录数量"
            >
              <template slot-scope="{row}">
                <span :class="{color:row.cate_num!=0}" @click="push(row)">{{ row.cate_num }}<i class="el-icon-position" /></span>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="操作" align="center">
              <template slot-scope="{ row }">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  size="mini"
                  @click="edit(row.id)"
                />
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  size="mini"
                  @click="del(row.id)"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 表格 -->
        <!-- 表格 -->

        <!-- 分页器 -->
        <!-- 分页器 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            background
            :current-page="page.page"
            :page-size="page.size"
            :total="page.total"
            :page-sizes="[10, 20, 30]"
            layout="prev, pager, next,sizes"
            @current-change="changePage"
            @size-change="changeSize"
          />
        </el-row>
        <!-- 分页器 -->
        <!-- 分页器 -->
      </el-card>
    </div>

    <!-- 弹出框 -->
    <!-- 弹出框 -->
    <div class="dialog">
      <el-dialog
        :title="dialogform.id ? '修改学科' : '添加学科'"
        :visible="subjectdialog"
        @close="dialogcnacel"
      >
        <el-form v-if="subjectdialog" ref="form" :model="dialogform" label-width="50px">
          <el-row>
            <el-col :span="14">
              <el-form-item label="学科名称" label-width="30%">
                <el-input
                  v-model="dialogform.subject_name"
                  placeholder="学科名称"
                  style="width: 500px"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-form-item>
            <el-button type="primary" @click="dialogform.sort--">-</el-button>
            <el-input v-model="dialogform.sort" style="width: 80px" />
            <el-button type="primary" @click="dialogform.sort++">+</el-button>
          </el-form-item> -->
          <el-row>
            <el-col :span="14">
              <el-form-item label="排序" label-width="30%">
                <template>
                  <el-input-number v-model="dialogform.sort" :min="1" />
                </template>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-form-item label="是否显示" label-width="30%">
                <el-switch
                  v-model="dialogform.is_show"
                  :active-value="1"
                  :inactive-value="2"
                  active-text="是"
                  inactive-text="否"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-form-item label="学科图标" label-width="30%">
                <el-upload
                  :file-list="fileList"
                  :on-remove="handleRemove"
                  action="http://122.51.249.55:7005/admin/index/upload?mode=single&type=image"
                  name="image"
                  :headers="mytoken"
                  :on-success="onSuccess"
                  list-type="picture-card"
                ><i
                  class="el-icon-plus"
                /></el-upload>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <!-- <el-form-item>
            <el-button size="small" @click="dialogcnacel">取消</el-button>
            <el-button
              size="small"
              type="primary"
              @click="dialogOK()"
            >确定</el-button> -->
        <!-- <el-button size="small" type="primary" @click="addfn(dialogform)">确定</el-button> -->
        <!-- </el-form-item> -->
        <!-- footer按钮 -->
        <template v-slot:footer>
          <el-row type="flex" justify="end">
            <el-col :span="6">
              <el-button size="medium" @click="dialogcnacel">取消</el-button>
              <el-button
                size="medium"
                type="primary"
                @click="dialogOK()"
              >确定</el-button>
            </el-col>
          </el-row>
        </template>
      </el-dialog>
    </div>
    <!-- 弹出框 -->
    <!-- 弹出框 -->
  </div>
</template>

<script>
import {
  getSubjectList,
  getlist,
  deleteSubject,
  addSubject,
  editSubject,
  getSmipleSubjectList,
  switchsubject
} from '@/api/subject'
import { mapGetters } from 'vuex'
// import Router from 'vue-router'
export default {
  name: 'Subject',
  data() {
    return {
      fileList: [],
      defaultimg: require('@/assets/images/default-icon.png'),
      mytoken: { Authorization: null },
      form: {
        subject_name: '云计算',
        is_show: '',
        limit: 10,
        page: 1
      },
      dialogform: {
        subject_name: '',
        sort: 10,
        is_show: 1,
        subject_icon: '',
        id: ''
      },
      value: true,
      subjectdialog: false,
      formLabelWidth: 80,
      list: [],
      page: {
        page: 1,
        limit: 10,
        total: 0
      },
      img: ''
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    this.mytoken.Authorization = this.token
    this.getSubjectList()
  },
  methods: {
    // 移除图片
    handleRemove(file, fileList) {
      this.fileList = []
    },
    // 跳转页面
    push(row) {
      this.$router.push({ path: 'directory', query: { name: row }})
      console.log(1)
    },
    // switch
    async switchfn(id, is_show) {
      await switchsubject({ id: id, is_show: is_show })
      this.getSubjectList()
      this.$message.success('切换成功')
    },
    // 查询
    async search(val) {
      const res = await getlist(val)
      this.list = res.data.list
      this.page.total = res.data.total
    },
    // 换页
    changePage(newPage) {
      this.page.page = newPage
      this.getSubjectList()
    },
    // 改每页的容量
    changeSize(newPage) {
      this.page.limit = newPage
      this.getSubjectList()
    },
    // 获取列表数据
    async getSubjectList() {
      try {
        const res = await getSubjectList(this.page)
        console.log(res)
        this.list = res.data.list
        this.page.total = res.data.total
      } catch (error) {
        console.log(error)
      }
    },
    // 重置按钮
    reset() {
      this.form = {
        name: '',
        region: ''
      }
      this.getSubjectList()
    },
    // 添加
    add() {
      setTimeout(() => {
        this.handleRemove()
      }, 0)
      this.subjectdialog = true
    },
    // 实现添加
    async addfn(val) {
      console.log(val)
      await addSubject(val)
      this.$message.success('添加成功')
      this.getSubjectList()
      this.dialogcnacel()
    },
    // 编辑功能回显
    async edit(id) {
      this.subjectdialog = true
      const res = await getSmipleSubjectList(id)
      this.dialogform.subject_name = res.data.subject_name
      this.dialogform.sort = res.data.sort
      this.dialogform.is_show = res.data.is_show
      this.dialogform.subject_icon = `http://122.51.249.55:7005${res.data.subject_icon}`
      this.fileList = [{ name: '22', url: '' }]
      this.fileList[0].url = `http://122.51.249.55:7005/${res.data.subject_icon}`
      this.dialogform.id = res.data.id
    },
    // 列表删除功能
    async del(id) {
      await this.$confirm('您确定删除吗')
      await deleteSubject(id)
      if (this.list.length === 1 && this.page.page !== 1) {
        this.page.page--
      }
      this.$message.success('删除成功')
      this.getSubjectList()
    },
    // 图片上传回调
    onSuccess(response, file, fileList) {
      console.log(response)
      this.dialogform.subject_icon = response.data.url
    },
    // 弹框确认事件
    async dialogOK() {
      if (!this.dialogform.id) {
        console.log('添加')
        console.log()
        await addSubject(this.dialogform)
        console.log(this.dialogform)
      } else {
      // 假如没有值的话，就是添加
        console.log('修改')
        // console.log(val)
        await editSubject(this.dialogform)
      }
      this.getSubjectList()
      this.$message.success('操作成功')
      this.dialogcnacel()
    // 编辑功能是先获取，再修改，所以先获取id 用 get ；之后使用put
    },
    // 弹框取消事件
    dialogcnacel() {
      this.dialogform = {
        subject_name: '',
        sort: 10,
        is_show: 1,
        subject_icon: '',
        id: ''
      }
      this.subjectdialog = false
      this.handleRemove()
    }
  }
}
</script>

<style scoped>
/* .top {
  margin-top: 20px;
} */
.create {
  float: right;
  margin-left: 50px !important;
}
.size{
  width: 80px;
  height: 80px;
}
.color{
  color:#1890ff;
}
</style>
